﻿/*!
 * Copyright (c), 上海沃恩信息科技有限公司.
 * All rights reserved.
 * Licensed under BSD (https://www.pittypat.work/bsd.html).
 */

/*!
 *  Material Icons
 */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), url(../fonts/MaterialIcons-Regular.woff) format('woff'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    display: inline-block;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

/* THEME
-------------------------------------------------- */

:root {
    /* 基本色 */
    --mdc-theme-primary: #03a9f4;
    /* 强调色 */
    --mdc-theme-accent: #ff3d00;
    /* 默认的超链接 hover 和 focus 颜色 */
    --theme-link-hover: #0277bd;
    /* 错误信息的颜色 */
    --theme-error: #d50000;
}

/* 字体大小与默认背景色 */
body {
    background-color: #fff;
    margin: 0;
    padding: 0;
}

/* 字体 */
body, button, input, optgroup, select, textarea {
    font-size: 14px;
    font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', STHeiti, 'WenQuanYi Micro Hei', SimHei, 'Microsoft YaHei', sans-serif !important;
}

code, pre, kbd, samp {
    font-family: 'Source Code Pro', 'Courier New', 'Hiragino Sans GB', STHeiti, 'WenQuanYi Micro Hei', SimHei, 'Microsoft YaHei', sans-serif;
}

/* 深色主题的背景色与前景色 */
.mdc-theme--dark {
    color: #fff;
    background-color: #303030;
}

/* 默认的超链接样式 */
a {
    color: #03a9f4;
    color: var(--mdc-theme-primary, #03a9f4);
    text-decoration: none;
    cursor: pointer;
}

    a:hover, a:focus {
        color: #0277bd;
        color: var(--theme-link-hover, #0277bd);
    }

    a label {
        cursor: inherit;
    }

.hover:hover {
    background-color: rgba(0,0,0,0.05);
}

.theme-text-2 {
    color: rgba(0,0,0,0.54);
    color: var(--mdc-theme-text-secondary-on-light, rgba(0,0,0,0.54));
}

/* COMMON
-------------------------------------------------- */

/* 移除所有元素的 outline */
*,
*:focus,
*:active {
    outline: none !important;
}

/* HEADER
-------------------------------------------------- */

body > header {
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 16px;
    color: #fff;
    color: var(--mdc-theme-text-primary-on-primary, #fff);
    background-color: #03a9f4;
    background-color: var(--mdc-theme-primary, #03a9f4);
    z-index: 1000;
}

    body > header > button {
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        border: none;
        background: none;
        color: inherit;
        cursor: pointer;
    }

    body > header > h1 {
        flex: 1 1 auto;
        margin: 0;
        padding: 0 16px 0 32px;
        font-size: 20px;
        font-weight: 500;
        height: 24px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* MAIN
-------------------------------------------------- */

body > main {
    margin: 56px 0 0 0;
    padding: 0;
}

/* HELP HOME
-------------------------------------------------- */

.help-home {
    padding: 16px;
}

@media (min-width: 840px) {
    .help-home {
        padding: 16px calc(50% - 404px);
    }
}

.help-home > h1 {
    text-align: center;
    margin: 0 0 16px 0;
    line-height: 1;
}

.help-home-app {
    counter-reset: home 0;
    list-style: none;
    padding-left: 0;
}

    .help-home-app > li > p {
        text-indent: 28px;
    }

    .help-home-app > li > h2 {
        display: flex;
    }

        .help-home-app > li > h2::before {
            counter-increment: home;
            content: counters(home, '.');
            width: 28px;
        }

.help-home-modules,
.help-home-funcs {
    counter-reset: home-toc 0;
    list-style: none;
    padding-left: 28px;
}

    .help-home-modules > li > p,
    .help-home-funcs > li > p {
        display: flex;
    }

        .help-home-modules > li > p::before,
        .help-home-funcs > li > p::before {
            flex: 0 0 auto;
            counter-increment: home-toc;
            content: counters(home-toc, '.');
            width: 42px;
            flex: 0 0 42px;
        }

/* NAV & ARTICLE
-------------------------------------------------- */

body > main > * {
    padding: 1px 16px;
    box-sizing: border-box;
}

@media (min-width: 840px) {
    body > main > nav {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        width: 280px;
        overflow: auto;
        border-right: 1px solid rgba(0,0,0,0.12);
    }

    body > main > article {
        margin-left: 280px;
        width: calc(100% - 280px);
    }
}

/* TOC
-------------------------------------------------- */

body > main > nav ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc 0;
}

body > main > nav p {
    display: flex;
    margin: 16px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body > main > nav li > p::before {
    counter-increment: toc;
    content: counters(toc, '.');
    width: 42px;
    flex: 0 0 42px;
}

.toc-index i,
.toc-app img {
    width: 16px;
    height: 16px;
    margin: 0 7px 0 0;
}

.toc-app {
    padding-left: 24px;
}

.toc-modules > li > p {
    padding-left: 48px;
}

.toc-funcs > li > p {
    padding-left: 72px;
}

/* ARTICLE
-------------------------------------------------- */

.help-module,
.help-funcs,
.help-params {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: help 0;
}

    .help-module > li > h1,
    .help-funcs > li > h2,
    .help-params > li > h3 {
        display: flex;
    }

        .help-module > li > h1::before,
        .help-funcs > li > h2::before,
        .help-params > li > h3::before {
            counter-increment: help;
            content: counters(help, '.');
            width: 70px;
            flex: 0 0 70px;
        }

    .help-funcs > li {
        margin-bottom: 56px;
    }

body > main > article div > p {
    text-indent: 2em;
}

/* FIGURE
-------------------------------------------------- */

body {
    counter-reset: figure-img 0;
}

figure.help-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

    figure.help-img > img {
        max-width: 100%;
        page-break-inside: avoid;
    }

    figure.help-img > figcaption {
        text-align: center;
        margin: 10px 0;
    }

        figure.help-img > figcaption::before {
            counter-increment: figure-img;
            content: '图' counter(figure-img) ': ';
        }

/* MISC
-------------------------------------------------- */

p {
    line-height: 20px;
    margin: 0.75em 0;
}

    p .material-icons {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-indent: 0;
        font-size: 20px;
        margin: 0 0.25em;
    }

body > main h1 {
    font-size: 28px;
}

body > main h2 {
    font-size: 24px;
}

body > main h3 {
    font-size: 18px;
}

.see-also {
    list-style-type: disc;
}

.text-danger {
    color: #d50000;
    color: var(--theme-error, #d50000);
}

.example {
    margin-bottom: 10px;
    padding: 15px 15px 5px 15px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    background-color: #f5f5f5;
}

    .example > ul,
    .example > ol {
        padding-left: 15px;
    }

@media print {
    .no-print,
    nav,
    body > header {
        display: none;
    }

    body > main {
        margin-top: 0;
    }
}
